<template>
  <div>
    <van-nav-bar
         left-arrow
        class="app-nav-bar"
        title="卫生检查录入"
        @click-left="$router.back()"
      />
      <van-form @submit="onSubmit">
          <van-field
             readonly
                v-model="currentDate"
                right-icon="arrow"
                label="检查日期"
                 @click="showPopup"
            />
            <van-popup v-model="dateShare" position="bottom" :style="{ height: '45%' }">
                <van-datetime-picker
                    type="date"
                    title="选择年月日"
                    :min-date="minDate"
                    :max-date="maxDate"
                    @confirm="confirm"
                    @cancel="dateShare = false"
                    :formatter="formatter"
                />
            </van-popup>
          <!-- <van-field
                readonly
                v-model="classContent"
                right-icon="arrow"
                label="宿舍栋号"
                placeholder="请选择宿舍栋号"
                @click="classListShare=true"
            />
              <van-action-sheet 
                v-model="classListShare"
                title="请选择"
                :actions="classList" 
                @select="onSelect" 
            /> -->
            <!-- buildingNoList:[],
        storeyList:[] -->
            <van-cell title="宿舍栋号">
                 <template #default>
                      <el-select v-model="buildingNo" placeholder="请选择">
                        <el-option
                        v-for="item in buildingNoList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                    </el-select>
                 </template>
             </van-cell>
             <van-cell title="楼层">
                 <template #default>
                      <el-select @change="onChange" v-model="storey" placeholder="请选择">
                        <el-option
                        v-for="item in storeyList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                    </el-select>
                 </template>
             </van-cell>
             <van-cell title="宿舍号">
                 <template #default>
                      <el-select v-model="bdormitoryId" placeholder="请选择">
                        <el-option
                        v-for="item in bdormitory"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                    </el-select>
                 </template>
             </van-cell>
             <van-cell title="卫生项">
                 <template #default>
                      <el-select v-model="classContent" multiple placeholder="请选择">
                        <el-option
                        v-for="item in classList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                    </el-select>
                 </template>
             </van-cell>
          
             <van-field
                v-model="form.leaveReason"
                label="描述信息"
                :rules="[{ required: true, message: '请填写描述信息' }]"
            />
            <!-- 提交 -->
            <div style="margin:16px">
                <van-button round block type="info" native-type="submit">提交</van-button>
            </div>
        </van-form>
  </div>
</template>

<script>
import {Notify} from 'vant'
export default {
    name:'HygieneAdd',
    data(){
        return{
            minDate: new Date(2000, 0, 1),
            maxDate: new Date(2021, 10, 1),
            currentDate:'',
           form:{
               studentNo: '',
                classId: '',
                className: "",
                studentName: '',
                leaveType: '',
                leaveReason: ''
           },
           tableData:[],
            status:[],
            statusListShare:false,
            statusContent:"",
            classList:[],
            classListShare:false,
            classContent:[],
             dateShare:false,
             yyyy:null,
             MM:null,
             dd:null,
             bdormitoryId:null,
             buildingNo:'',
             storey:'',
              bdormitory:[],
             buildingNoList:[],
             storeyList:[]
        }
    },
     methods:{
         showPopup() {
            this.dateShare = true;
        },
         confirm(){
            this.currentDate=`${this.yyyy}-${this.MM}-${this.dd}`
            this.dateShare=false
         },
        async onSubmit(){
            var {data:res} = await this.$axios({
                url:this.$location.addHygiene,
                method:'post',
                data:{
                    bdormitoryId: this.bdormitoryId,
                    bdormitoryOptions:this.bdormitory,
                    buildingNo:this.buildingNo,
                    buildingNoOptions:this.buildingNoList,
                    checkDate:this.currentDate,
                    createById:'2',
                    deductIds:this.classContent,
                    hygieneDeductOptions:this.classList,
                    remark:this.form.leaveReason,
                    storey:this.storey,
                    storeyOptions:this.storeyList
                }
            })
            // console.log(res)
            if(res.status==200){
                 this.$toast.success(res.msg)
                 this.$router.push('/Hygiene1');
            }
        },
        onSelect(item){
            this.classContent=item.name;
            this.form.classId=item.id
            this.classListShare = false;
        },
        async getClassListAll(){
            const {data:res} =await this.$axios({url:this.$location.getHyDeAll});
            res.data.forEach(item=>{
                this.classList.push({
                    id:item.id,
                    name:item.deductOption
                })
            })
        },
        //      bdormitory:[],
        //      buildingNoList:[],
        //      storeyList:[]
        async getBuilding(){
            const {data:res} =await this.$axios({url:this.$location.building});
            res.data.forEach(item=>{
                this.buildingNoList.push({
                    id:item.dictValue,
                    name:item.dictLabel
                })
            })
        },
        async getStorey(){
            const {data:res} =await this.$axios({url:this.$location.storey});
            res.data.forEach(item=>{
                this.storeyList.push({
                    id:item.dictValue,
                    name:item.dictLabel
                })
            })
        },
        async onChange(){
            if(this.buildingNo!='' && this.storey!=''){
                var {data:res} = await this.$axios({
                    url:this.$location.getBDormitoryListByCol,
                    params:{
                        buildingNo: this.buildingNo,
                        storey: this.storey
                    }
                })
                // this.bdormitory=res.data
                res.data.forEach(item=>{
                    this.bdormitory.push({
                        id:item.id,
                        name:item.dormitoryNo
                    })
                })
            }
        },
        formatter(type, val) {
            if(type === 'year'){
                this.yyyy=val;
                return `${val}年`;
            }else if (type === 'month') {
                 this.MM=val;
                return `${val}月`;
            } else if (type === 'day') {
                 this.dd=val;
                return `${val}日`;
            }
            return val;
        },
         async select(){
            var {data:res} =await this.$axios({
                url:this.$location.getHygieneById,
                params:{
                    id:this.$route.params.id
                }
            })
           this.tableData=res.data;
        }
    },
    created(){
        this.getBuilding();
        this.getStorey();
        this.select();
         this.getClassListAll()
    }
}
</script>

<style lang="less" scoped>
 /deep/ .app-nav-bar{
        background-color: #35d299;
        .van-nav-bar__title{
            color: #fff;
        }
        .van-icon{
            color: #fff;
        }
    }
</style>